<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字典选择</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="../../css/public.css" media="all">
    </head>
    <body>
        <div class="layui-form " lay-filter="myForm">
            <div style="width:100%; ">
                <div style="display: inline-block; width: 90%; height: 400px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
                    <ul id="menu-tree" class="demo-tree-more"></ul>
                </div>
            </div>

        </div>
        <script src="../../lib/layui/layui.js" charset="utf-8"></script>
        <script src="../../js/provider/my-utils.js" charset="utf-8"></script>
<script>
    layui.use(['tree', 'layer','form','table'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tree = layui.tree;
        $.ajax({
            url: "/channel/sys-dict/ALL",
            type: 'POST',
            headers: {
                'Accept': 'application/json',
                'Authorization': 'Bearer ' + JSON.parse(localStorage.getItem('userdetail')).token
            },
            success: function (data) {
                var datalist = data.data;
                for (var o in datalist) {
                    if(datalist.pid==0){
                    }
                    datalist[o].title = datalist[o].name;
                    datalist[o].spread = true;
                }
                datalist = transData(datalist,"id","pid","children");
                tree.render({
                    elem: '#menu-tree' //指定元素
                    , data:datalist
                    ,isJump: false //是否允许点击节点时弹出新窗口跳转
                    ,showLine: false  //是否开启连接线
                    ,onlyIconControl:true//是否仅允许节点左侧图标控制展开收缩
                    ,click: function(obj){
                        clickdata = obj.data;  //获取当前点击的节点数据
                        // console.log("clickdata",clickdata);
                        // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(clickdata));
                        localStorage.setItem("DictName",clickdata.title);
                        localStorage.setItem("DictId",clickdata.id);
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }
                });
            }, error: function (data) {
            }
        });
        form.render(null,'myForm');
    });
    //递归方法
    function transData(json, idStr, pidStr, chindrenStr) {
        var r = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, i = 0, j = 0, len = json.length;
        for (; i < len; i++) {
            hash[json[i][id]] = json[i];
        }
        for (; j < len; j++) {
            var aVal = json[j], hashVP = hash[aVal[pid]];
            if (hashVP) {
                !hashVP[children] && (hashVP[children] = []);
                hashVP[children].push(aVal);
            } else {
                r.push(aVal);
            }
        }
        return r;
    }
</script>
    </body>
</html>